<template>
	<view class="content">
		<block v-for="(i, index) in data" :key="index">
			<view class="list" >
				<view class="top">
					<view class="name">
						<text class="text">{{ i.name }}</text>
						<text class="text1">{{ i.phone }}</text>
					</view>
					<view class="addr">
						<text>{{ i.site }}</text>
					</view>
				</view>
				<view class="btn">
					<view class="btn_a" @click="clkOn(index, i)">
						<!-- selected == index -->
						<text class="xuanzhe" v-if="show" :style="{ 'background-color': i.is_default == 1 ? '#ff1a14' : '' }"></text>
						<text class="xuanzhe" v-else :style="{ 'background-color': selected == index ? '#ff1a14' : '' }"></text>
						<text class="moren">设为默认地址</text>
					</view>
					<text class="rem" @click="setTheDef(i.id,2)">删除</text>
				</view>
			</view>
		</block>

		<view class="add" @click="addr">
			<u-icon name="plus" color="#C9C9C9" size="150"></u-icon>
			<text class="tianjia">添加新地址</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selected: '',
			show: true,
			data: [],
			did: '',
		};
	},
	onShow() {
		this.shipAddr();
	},
	onLoad(e) {
		this.shipAddr();
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ff0000',
		});
	},
	methods: {
		//用户收货地址
		async shipAddr() {
			let obj = {
				uid: uni.getStorageSync('uid'),
			};
			const res = await this.$u.post('api/shop/address_list', obj, {});
			if (!res.code) return uni.$showMsg();
			this.data = res.data;
			console.log('用户收货地址 >>  ', res);
		},
		//收货地址设置默认 删除
		async setTheDef(did, type) {
			uni.$showLoading();
			let obj = {
				uid: uni.getStorageSync('uid'),
				did: did,
				type: type /* 1 设置默认 2删除 */,
			};
			const res = await this.$u.post('api/shop/address_update', obj, {});
			if (!res.code) return uni.$showMsg();
			uni.$showMsg(res.msg);
			this.shipAddr() /* 删除后更新地址*/
			console.log('res >>  ', res);
		},
		clkOn(index, i) {
			console.log('i :>> ', i);
			//this.did = i.id
			this.selected = index;
			console.log('this.selected  :>> ', this.selected);
			this.show = false;
			this.setTheDef(i.id, 1);
		},
		addr() {
			uni.navigateTo({
				url: './addAddr',
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	overflow: scroll;
	background-color: #f5f8fd;
	.list {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 690rpx;
		//height: 180rpx;
		background: #ffffff;
		border-radius: 10rpx;
		.top {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 20rpx;
			height: 109rpx;
			border-bottom: 1rpx solid #f1eded;
			.name {
				display: flex;
				justify-content: space-between;
				.text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.text1 {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
			.addr {
				display: flex;
				justify-content: flex-start;

				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
		.btn {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			// height: calc(100% - 109rpx);
			.btn_a {
				display: flex;
				.xuanzhe {
					display: block;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					border: 1rpx solid #cccccc;
					// background-color: #ff1a14;
					margin-right: 30rpx;
				}
				.moren {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
			.rem {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ff1a14;
			}
		}
	}
	.add {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 690rpx;
		height: 200rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin: 50rpx auto;
		//margin:  50rpx 0 ;
		.tianjia {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #c9c9c9;
		}
	}
}
</style>
